<template>
  <div class="login">
    <van-nav-bar left-arrow @click-left="$router.back()" />

    <h5>您好，请登录</h5>
    <!-- 手机号码和验证码组件基本功能实现，样式待优化 -->
    <van-form @submit="onSubmit" class="myfrom">
      <van-field
        v-model="mobile"
        name="mobile"
        label="手机号"
        placeholder="请填写手机号"
        :rules="[
          { required: true, message: '请填写手机号' },
          {
            pattern:
              /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '手机格式错误',
          },
        ]"
      />

      <van-field
        v-model="code"
        type="text"
        name="code"
        label="验证码"
        placeholder="请输入验证码"
        :rules="[
          { required: true, message: '请填写验证码' },
          {
            pattern: /^\d{4}$/,
            message: '验证码格式不正确',
          },
        ]"
      />
      <!-- 获取验证码组件基本功能实现，样式暂时不正确，待优化 -->
      <van-tag type="primary" size="medium" @click="getCode"
        >获取验证码</van-tag
      >

      <div class="xieyi">
        登录即同意<span>《用户使用协议》</span>和
        <span>《隐私协议》</span>
      </div>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          :loading="isLodinng"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { loginCode,userLogin } from "../utils/axios";
import { saveToken, getToken, removeToken } from "../utils/token";
export default {
  name: "login",
  data() {
    return {
      mobile: "",
      code: "",
      isLodinng: false,
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      this.isLodinng = true;
     userLogin(values).then((res) => {
        console.log(res.data.data.jwt);
        this.isLodinng = false;
        saveToken(res.data.data.jwt);
        this.$router.push({ path: "/myinfo" });
      });
    },
    async getCode() {
      const res = await loginCode(this.mobile)
      if (res.data.code == 200) {
        this.$toast.success("获取成功");
        this.code = res.data.data;
      } else if (res.data.code == 400) {
        this.$toast.success("请填写手机号码");
      }
      console.log(res);
    },
  },
};
</script>

<style lang="less">
.login {
  .van-nav-bar__content {
    height: 44px;
    margin-top: 44px;
  }
  .van-icon-arrow-left.van-nav-bar__arrow {
    font-size: 30px;
    color: #000;
  }
  h5 {
    margin-left: 20px;
    margin-top: 50px;
  }
  .xieyi {
    font-size: 12px;
    margin: 15px;
    margin-bottom: 44px;
    span {
      color: #38c7dd;
    }
  }
  .myfrom {
    position: relative;
    .van-button--plain {
      position: absolute;
      top: 80px;
      right: 0;
    }

    .van-tag--primary {
      position: absolute;
      height: 30px;
      font-size: 18px;
      top: 50px;
      right: 5px;
    }
  }
}
</style>